<template>
	<view style="width: 100%;">
		<app-list :listData="list_data" @listChange="listChange" style="margin-top: 44rpx;"></app-list>
	</view>
</template>

<script>
	import appList from "components/healer-dragList/AppList.vue"
	export default {
		components:{
			appList,
		},
		data() {
			return {
				list_data: [], //变动前的列表
				change_list_data:[], //变动后的列表
			}
		},
		onLoad() {
			let self = this
			//我的服务
			self.$api.fAppServeGetMyList().then((res) => {
				self.list_data = res.data.result
				console.log(self.list_data)
			})
		},
		methods: {
			/**
			 * @name 排序变动
			 * @param {Object} option  变动后的数组
			 */
			listChange(option){
				this.change_list_data = []
			    console.log("listChange",option)
				option.forEach((res,index) => {
					let item = {}
					item.serveId = res.serveId
					item.serOrder = index
					this.change_list_data.push(item)
				})
				console.log(this.change_list_data);
			},
		},
		onNavigationBarButtonTap(e) {
			let self = this
			console.log(self.change_list_data);
			let data = self.change_list_data
			//管理服务
			self.$api.fAppServeAddServeList({
				serves: data
			}).then((res) => {
				console.log('保存成功');
				uni.$emit('manage')
				uni.$emit('index_serve')
				uni.$emit('serve_info')
				uni.navigateBack({
					delta:1
				})
			}).catch(e=>{
					console.log(e);
				})
		}, 
	}
</script>

<style scoped>
	.navArea2{
		width: 100%;
		margin-top: 46rpx;
		border-bottom: 8rpx solid #F8F8F8;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		flex-wrap: wrap;
	}
</style>
